<!-- 专利 -->
<template>
  <div class="list-wrap">
    <el-checkbox-group v-model="checkBoxList">
      <div v-for="(item, index) in listData" :key="index" class="list-a">
        <el-checkbox class="list-checkbox" :label="item">{{ }}</el-checkbox>
        <div class="mode-a">
          <div class="title">
            <h4>
              <p class="name">
                <span
                  v-show="defaultTrans === true"
                  class="txt"
                  @click="toDetail(index)"
                >
                  {{ index + 1 }}、
                  <span v-html="item.ttl_zh"></span>
                </span>
                <span
                  v-show="defaultTrans === false"
                  class="txt"
                  @click="toDetail(index)"
                >
                  {{ index + 1 }}、
                  <span v-html="item.ttl"></span>
                </span>
                <span v-if="item.leg_det" class="leg_det">{{
                  item.leg_det
                }}</span>
              </p>
            </h4>
            <!-- 屏蔽本条结果 -->
            <p class="shield">
              <el-tooltip content="屏蔽本条结果" placement="top">
                <img
                  src="@/assets/img/IR/shield.svg"
                  @click="handleShield(item)"
                />
              </el-tooltip>
            </p>
            <p>
              <!-- 收藏 -->
              <el-tooltip
                :content="!item.isCollection ? '收藏' : '取消收藏'"
                placement="top"
              >
                <a
                  class="collect"
                  :class="{
                    'el-icon-star-on': item.isCollection,
                    'el-icon-star-off': !item.isCollection,
                  }"
                  @click="handleCollect(item, index)"
                ></a>
              </el-tooltip>
            </p>
            <!-- <aside class="tools-box">
              <span class="trans" :class="{active: item.showTitTrans || item.showAbstTrans}" @click="transalte(item, index)">翻译</span>
              <span class="archives" @click="toArchives(origListData[index])">专利评估</span>
            </aside> -->
          </div>
          <div class="list-main">
            <div class="right">
              <ul class="info">
                <li>
                  <span class="tit">申请号：</span
                  ><span class="content" v-html="item.apn"></span>
                </li>
                <li>
                  <span class="tit">公开/公告号：</span
                  ><span class="content" v-html="item.pn"></span>
                </li>
                <li>
                  <span class="tit">申请日：</span
                  ><span class="content" v-html="item.apd"></span>
                </li>
                <li>
                  <span class="tit">公开/公告日：</span
                  ><span class="content" v-html="item.isd"></span>
                </li>
                <li>
                  <span class="tit">申请人：</span
                  ><span class="content" v-html="item.an"></span>
                </li>
                <li>
                  <span class="tit">发明人：</span
                  ><span class="content" v-html="item.in"></span>
                </li>
                <li>
                  <span class="tit">专利价值度：</span
                  ><span class="content">{{ Math.ceil(item.j || 0) }}</span>
                </li>
                <!-- <li><span class="tit">优先权：</span><span  class="content" v-html="item.pririnfo"></span></li> -->
                <!-- <li><span class="tit">主IPC：</span>
                  <span v-html="item.ipc"> </span>；<span  v-html="item.ipc_kind"> </span>
                </li> -->
              </ul>
              <p
                v-show="defaultTrans === true"
                class="abs ellipsis-4"
                v-html="item.abst_zh"
              ></p>
              <p
                v-show="defaultTrans === false"
                class="abs ellipsis-4"
                v-html="item.abst"
              ></p>
              <!-- <aside class="footer">
                <p class="left">
                  <span v-if="showScore">相关度：<i  v-html="item.score"></i></span>
                  <span v-if="item.family_num!=='--'">同族数：<i  v-html="item.family_num"></i></span>
                  <span v-if="item.acc!=='--'">权项数：<i  v-html="item.acc"></i></span>
                </p>
                <span v-if="item.lss!=='--'" class="tag" :class="{published: item.lss === '公开', valid: item.lss === '授权'}" v-html="item.lss"></span>
              </aside> -->
            </div>
          </div>
        </div>
      </div>
    </el-checkbox-group>

    <!-- no-data -->
    <div v-if="noData" class="no-data">
      <loading1 :emptyText="emptyText" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import {
  disassembleWord,
  wordsLight,
  isZh,
  replaceKeyword,
} from "@/utils/utils.js";
export default {
  props: {
    data: {
      type: Object,
    },
    checkAllVal: {
      type: Boolean,
    },
  },
  data() {
    return {
      listData: [],
      origListData: [], // 原始数据
      checkBoxList: [],
      showScore: false,
      noData: false,
      cancel: null,
      emptyText: "",
      dataIndex: -1,
    };
  },
  computed: {
    ...mapState([
      "searchWord",
      "highlightKeyWords",
      "highlightModeSettings",
      "defaultTrans",
    ]),
  },
  watch: {
    data() {
      this.getListData(this.data);
    },
    // defaultTrans() {
    //   if (this.defaultTrans === true) {
    //     this.listData.forEach((v, i) => {
    //       v.showTitTrans = false; // 标题翻译
    //       v.showAbstTrans = false; // 摘要翻译
    //       // this.transalte(v, i);
    //     });
    //   } else {
    //     this.listData.forEach((v, i) => {
    //       v.showTitTrans = true; // 标题翻译
    //       v.showAbstTrans = true; // 摘要翻译
    //       // this.transalte(v, i);
    //     });
    //   }
    // },
    // 多选
    checkBoxList() {
      // this.$emit('checkBoxList', this.checkBoxList)
      this.$Bus.$emit("getDcCheckBoxlist", this.checkBoxList);
    },
    // 全选
    checkAllVal() {
      this.checkBoxList = this.checkAllVal ? this.listData : [];
    },
    // 高亮模式
    highlightModeSettings: {
      deep: true,
      handler: function() {
        this.getListData(this.data);
      },
    },
  },
  mounted() {
    if (Object.keys(this.data).length > 0) {
      this.getListData(this.data);
    }
    this.$Bus.$on("emptyText", (data) => {
      this.emptyText = data;
    });
    this.$Bus.$on("isCollect", (data) => {
      if (data.type == "success") {
        this.$set(this.listData[this.dataIndex], "isCollection", true);
        this.$set(
          this.listData[this.dataIndex],
          "collectionId",
          data.collectionId
        );
      } else {
        this.$set(this.listData[this.dataIndex], "isCollection", false);
      }
    });
    this.replaceKeyword = replaceKeyword;
  },
  methods: {
    handleShield(item) {
      this.$Bus.$emit("shield", {
        sq: ` and (not id/${item.pn})`,
        sourceType: "PATENT",
      });
    },
    handleCollect(item, index) {
      // console.log("item", item);
      // return;
      this.dataIndex = index;
      let type = "collect",
        sourceId = item.pn;
      if (item.isCollection) {
        // 取消收藏
        type = "cancle";
        sourceId = item.collectionId;
      }
      this.$Bus.$emit("collect", {
        type: type,
        title: item.ttl_zh || item.ttl || item.ttl_en,
        sourceId: sourceId,
        sourceType: "PATENT",
      });
    },
    getListData(data) {
      let result = data.result || [];
      let list = [];
      let origList = [];
      result.forEach((v, index) => {
        let obj = {
          ...v,
          ttl: v.ttl || v.ttl_zh || v.ttl_en || "暂无", // 原始标题
          ttl_zh: v.ttl_zh || v.ttl || "暂无", // 中文标题
          // ttl_en: v.ttl_en || v.ttl || "暂无", // 英文标题
          apn: v.apn || "--", // 申请号
          apd: v.apd || "--", // 申请日
          pn: v.pn || "--", // 公开/公告号
          id: v.pn || "--", // 公开/公告号
          isd: v.isd || "--", // 公开/公告日
          an: (v.an && v.an.join("，")) || "--", // 申请人
          in: (v.in && v.in.join("，")) || "--", // 发明人
          pririnfo: v.pririnfo || "--", // 优先权
          ipc: v.ipcm || "--", // ipc
          ipc_kind: v.ipc_kind || "--",
          abst: v.abst || v.abst_zh || v.abst_en || "暂无", // 摘要
          abst_zh: v.abst_zh || v.abst || "暂无", // 中文摘要
          // abst_en: v.abst_en || v.abst || v.abst_zh || "", // 英文摘要
          score: (v.score && v.score.toFixed(2) + "%") || "--", // 相关度
          family_num: v.family_num || "--", // 同族数
          acc: v.acc || "--", // 权项数
          lss: v.lss || "--", // 法律状态
          imgSrcArr: (this.origListData &&
            this.origListData[index] &&
            this.origListData[index].imgSrcArr) || ["init"], // 图片数组
          // showTitTrans: false, // 标题翻译
          // showAbstTrans: false, // 摘要翻译
        };
        origList.push(obj); // 原始数据
      });
      // console.log("defaultTrans", this.defaultTrans);
      // 翻译开关
      // if (this.defaultTrans) {
      //   origList.forEach((v, i) => {
      //     v.showTitTrans = false;
      //     v.showAbstTrans = false;
      //     // this.transalte(v, i);
      //   });
      // } else {
      //   origList.forEach((v, i) => {
      //     v.showTitTrans = true;
      //     v.showAbstTrans = true;
      //     // this.transalte(v, i);
      //   });
      // }

      this.origListData = origList;

      list = JSON.parse(JSON.stringify(origList)); // 高亮模式下的数据

      // 高亮模式
      let settings = [];
      let open = this.highlightModeSettings.open;
      // 默认关键词高亮样式
      let defObj = [];
      // if (this.highlightKeyWords.open) {
      //   // 如果是高级检索
      //   defObj = this.highlightKeyWords.modes;
      // } else {
      //   // 如果是智能检索
      //   let wordArr = disassembleWord(this.searchWord);
      //   defObj = wordArr;
      // }

      if (open) {
        // 如果开启高亮模式
        settings = [...defObj, ...this.highlightModeSettings.modes];
      } else {
        settings = [...defObj];
      }

      list.forEach((v) => {
        v.in = wordsLight(v.in, settings);

        v.ttl = wordsLight(v.ttl, settings);
        v.ttl_zh = wordsLight(v.ttl_zh, settings);
        // v.ttl_en = wordsLight(v.ttl_en, settings);
        v.abst = wordsLight(v.abst, settings);
        v.abst_zh = wordsLight(v.abst_zh, settings);
        // v.abst_en = wordsLight(v.abst_en, settings);
        v.apn = wordsLight(v.apn, settings);
        v.apd = wordsLight(v.apd, settings);
        v.pn = wordsLight(v.pn, settings);
        v.isd = wordsLight(v.isd, settings);
        v.ipc = wordsLight(v.ipc, settings);
        v.ipc_kind = wordsLight(v.ipc_kind, settings);
        v.an = wordsLight(v.an, settings);
        v.in = wordsLight(v.in, settings);
        v.pririnfo = wordsLight(v.pririnfo, settings);
        v.ipc = wordsLight(v.ipc, settings);
        v.abst = wordsLight(v.abst, settings);
        v.score = wordsLight(v.score, settings);
        v.family_num = wordsLight(v.family_num, settings);
        v.acc = wordsLight(v.acc, settings);
        v.lss = wordsLight(v.lss, settings);
      });

      this.listData = list;

      this.noData = origList.length <= 0 ? true : false;
    },
    // 跳转详情
    toDetail(index) {
      let detailLeftMenu = [];
      this.origListData.forEach((v) => {
        detailLeftMenu.push({
          id: v.pn || "--", // 申请号
          title: v.ttl, // 标题
        });
      });
      localStorage.setItem("detailLeftMenu", JSON.stringify(detailLeftMenu));

      this.$nextTick(() => {
        let id = this.origListData[index].pn;
        let routerUrl = this.$router.resolve({
          name: "DataCenterDetail",
          query: {
            id,
            type: "patent",
          },
        });
        window.open(routerUrl.href, "_blank");
      });
    },

    // 翻译
    // transalte(item, index) {
    //   let ttl = item.ttl;
    //   let abst = item.abst;
    //   if (item.showTitTrans === true) {
    //     item.showTitTrans = false;
    //   } else {
    //     // 标题
    //     if (item.transTtl && item.transTtl !== "") {
    //       item.showTitTrans = true;
    //     } else {
    //       // 判断是否为中文
    //       let ttlType = "";
    //       if (isZh(item.ttl)) {
    //         ttlType = "ttl_en";
    //       } else {
    //         ttlType = "ttl_zh";
    //       }
    //       if (item[ttlType] && item[ttlType] !== "") {
    //         this.$set(item, "transTtl", item[ttlType]);
    //         item.showTitTrans = true;
    //       } else {
    //         if (this.origListData[index] && this.origListData[index].pn) {
    //           this.transField(ttl, this.origListData[index].pn, (data) => {
    //             this.$set(item, "transTtl", data);
    //             item.showTitTrans = true;
    //           });
    //         }
    //       }
    //     }
    //   }

    //   if (item.showAbstTrans === true) {
    //     item.showAbstTrans = false;
    //   } else {
    //     // 摘要
    //     if (item.transAbst && item.transAbst !== "") {
    //       item.showAbstTrans = true;
    //     } else {
    //       // 判断是否为中文
    //       let abstType = "";
    //       if (isZh(item.abst)) {
    //         abstType = "abst_en";
    //       } else {
    //         abstType = "abst_zh";
    //       }
    //       if (item[abstType] && item[abstType] !== "") {
    //         this.$set(item, "transAbst", item[abstType]);
    //         item.showAbstTrans = true;
    //       } else {
    //         this.transField(abst, item.pn, (data) => {
    //           this.$set(item, "transAbst", data);
    //           item.showAbstTrans = true;
    //         });
    //       }
    //     }
    //   }
    // },
    // 对应具体的翻译字段
    // transField(str, pn, func) {
    //   // 过滤一些特殊字符，否则无法正常翻译
    //   let newStr = str.replace(/&nbsp;/g, "").replace(/<br>/g, "\n"); // .replace(/[\n]/g, ' ')
    //   this.$post(this.$Url.transalte, {
    //     text: newStr,
    //     pn,
    //   })
    //     .then((res) => {
    //       let translatedObj =
    //         res.data &&
    //         res.data.translation &&
    //         res.data.translation[0] &&
    //         res.data.translation[0].translated[0];
    //       let translatedText = translatedObj.text;
    //       translatedText = translatedText.replace(/\n/g, "<br/>");
    //       func && func(translatedText);
    //     })
    //     .catch((err) => {});
    // },
    // 跳转专利档案
    // toArchives(item) {
    //   let url = this.$router.resolve({
    //     name: "PatentArchives",
    //     query: {
    //       pn: item.pn,
    //     },
    //   });
    //   window.open(url.href, "_blank");
    // },
  },

  beforeDestroy() {
    this.$Bus.$off("emptyText");
    this.$Bus.$off("collect");
    this.$Bus.$off("isCollect");
  },
};
</script>

<style lang="scss" scoped>
.list-wrap {
  position: relative;
  .list-a {
    position: relative;
    display: flex;
    min-height: 210px;
    padding: 20px 0;
    border-left: 4px solid transparent;
    border-bottom: 1px solid $color2;
    box-sizing: border-box;
    background-color: $color2;
    &:hover {
      border-left-color: $mainColor;
      background-color: $color153;
    }
  }
  .list-checkbox {
    position: relative;
    top: 4px;
    left: 12px;
  }
  .mode-a {
    position: relative;
    flex: 1;
    min-width: 0;
    padding-left: 15px;
    padding-right: 10px;
    // margin-left: 34px;
    box-sizing: border-box;
    .title {
      position: relative;
      width: 100%;
      display: inline-flex;
      align-items: center;
      padding-left: 0;
      border-bottom: 0;
      margin-bottom: 15px;
      h4 {
        display: inline-flex;
        align-items: flex-end;
        width: calc(100% - 40px);
        line-height: 1.5em;
        margin-top: 0;
        margin-bottom: 0;
        .name {
          display: inline-block;
          margin-top: 0;
          margin-bottom: 0;
          // &:hover {
          //   color: $color141;
          // }
          span {
            min-height: 25px;
            line-height: 25px;
            margin-right: 14px;
            font-size: 18px;
            cursor: pointer;
            &.icon {
              display: inline-block;
              width: 24px;
              margin-right: 10px;
              text-align: center;
              font-weight: normal;
              font-size: 16px;
              vertical-align: top;
              color: $mainColor;
              cursor: pointer;
            }
            &.iconzhankai2 {
              font-size: 20px;
            }
            &.iconshoucang3 {
              color: $mainColor;
            }
          }
          .leg_det {
            display: inline-block;
            padding: 0 6px;
            // background: #dfdeec;
            background: rgba(3, 179, 140,0.1);
            color: $mainColor;
            border-radius: 5px;
            font-size: 0.12rem;
            position: relative;
            top: 0;
          }
        }
      }
      .shield {
        margin-right: 10px;
        cursor: pointer;
      }
      .collect {
        cursor: pointer;
      }
      .el-icon-star-on {
        color: $color120;
        font-size: 0.3rem;
      }

      button {
        padding: 4px 15px;
        border: 1px solid $color37;
        border-radius: 13px;
        color: $color141;
        background-color: transparent;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: $color141;
        }
      }
    }
    .list-main {
      position: relative;
      display: flex;
      width: 100%;
      min-height: 160px;
      // margin-bottom: 15px;
      .head-img,
      .no-img {
        position: relative;
        width: 150px;
        height: 200px;
        border: 1px solid $color2;
        cursor: pointer;
        .head-img-loading {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          height: 200px;
          background-color: $color62;
          .icon {
            display: inline-block;
            width: auto;
            height: auto;
            font-size: 30px;
            color: $color63;
          }
        }
        .no-img {
          border: 1px solid $color2;
          box-sizing: border-box;
          img {
            display: inline-block;
            width: 100%;
            height: 100%;
          }
        }
      }
      .right {
        position: relative;
        flex: 1;
        min-width: 0;
        padding-left: 20px;
        padding-right: 10px;
        .info {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          list-style: none;
          li {
            position: relative;
            display: inline-flex;
            width: 50%;
            line-height: 24px;
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            span {
              display: inline-block;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &.tit {
                width: 87px;
                color: $color6;
              }
              &.content {
                flex: 1;
                color: $color158;
              }
            }
          }
        }
        .abs {
          line-height: 24px;
          margin: 5px 0;
          font-size: 12px;
          color: $color143;
        }
        .footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0;
          .left {
            flex: 1;
            span {
              position: relative;
              display: inline-block;
              margin-right: 24px;
              font-size: 12px;
              color: $color6;
              i {
                font-style: normal;
                color: $color1;
              }
            }
          }
          .tag {
            padding: 6px 10px;
            border-radius: 4px;
            margin: 0 5px;
            font-size: 12px;
            color: #fff;
            background-color: $mainColor;
            vertical-align: text-bottom;
          }
        }
      }
    }
  }
}
.tools-box {
  position: absolute;
  top: 0;
  right: 0;
  // width: 176px;
  padding-right: 10px;
  text-align: right;
  > span {
    display: inline-block;
    width: 78px;
    line-height: 26px;
    border: 1px solid $color141;
    border-radius: 30px;
    margin-left: 10px;
    text-align: center;
    font-size: 12px;
    color: $mainColor;
    background-color: transparent !important;
    cursor: pointer;
    &:nth-of-type(1) {
      margin-left: 0;
    }
    &.active {
      border-color: $mainColor;
      color: $color2;
      background-color: $mainColor !important;
    }
    &.assess {
      border-color: $mainColor !important;
      color: $color2;
      background-color: $mainColor !important;
    }
    &.archives {
      &:hover {
        border-color: $mainColor;
        color: $color2;
        background-color: $mainColor !important;
      }
    }
  }
}
.no-data {
  position: relative;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: $color6;
  background-color: $color2;
}
</style>
